<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索页面</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/request.js"></script>
    <script src="../js/loading.js"></script>
    <script src="../js/underscore.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="head">
        <div class="head_top width clearfix">
            <img src="../images/logo.png">
            <div class="search_nav right">
                <input type="text" placeholder="请输入想要的商品" value="">
                <button id="search">搜索</button>
            </div>
        </div>
        <div class="head_dw width clearfix">
            <ul class="nologin">
                <li><a href="../index.html">首页</a></li>
                <li><a href="../view/login.html">登录</a></li>
                <li><a href="../view/register.html">注册</a></li>
            </ul>
            <ul class="login">
                <li><a href="../index.html">首页</a></li>
                <li><a href="../view/shopCar.html">购物车</a></li>
                <li><a href="./login.html" id="quit">退出登录</a></li>
            </ul>
            <div class="search_nav right mar">
                <input type="text" placeholder="请输入想要的商品" value="">
                <button id="search">搜索</button>
            </div>
        </div>
    </div>
    <!-- 商品列表 -->
    <div class="goods width clearfix">

    </div>
    <!-- 返回顶部 -->
    <div class="returnTop">
        <img src="../images/上箭头.png">
    </div>
</body>
<script>
    var goods = document.querySelector(".goods");
    var input = document.querySelector("input");
    var search = document.querySelector("#search");
    var keyValue = sessionStorage.getItem("key");
    input.value = keyValue;

    getSearch(keyValue);
    search.addEventListener("click", function () {
        goods.innerHTML = "";
        getSearch(input.value);
    })

    function getSearch(name) {
        var loader = createLoading({
            src: '../images/loading.jpg',
        }).show();
        REQUEST.get("/search", {
            params: {
                word: name,
            }
        }, function (data) {
            console.log(data);
            var html = '';
            for (var i = 0; i < data.length; i++) {
                var item = data[i];
                html +=
                    `
                <div class="list left" data-id="${item.Id}">
                    <img src="../images/loading.jpg" data-src="${item.img_list_url}" >
                    <h3>${item.title}</h3>
                    <div class="list-dw clearfix">
                        <span class="price left">${item.price}</span>
                        <div class="mack right">${item.mack}</div>
                    </div>
                </div>
                `
            }
            goods.innerHTML = html;
            linkDetail();
            //懒加载
            var imgs = document.querySelectorAll(".list>img");
            imgs = Array.from(imgs);
            window.onscroll = function (e) {
                setTimeout(function () {
                    lazy(imgs);
                }, 2000);
            }
            lazy(imgs);
            function lazy(imgs) {
                for (var i = 0; i < imgs.length; i++) {
                    var height = imgs[i].offsetTop;
                    var wheight = window.innerHeight;
                    var sheight = document.documentElement.scrollTop;
                    if (height <= wheight + sheight) {
                        imgs[i].src = imgs[i].dataset.src;
                    }
                }
            }
            if (data == "") {
                goods.innerHTML = `
                    <div class="noList clearfix">
                        <h2 class="left">很抱歉，现在没有该类商品</h2>
                        <a href="../index.html">返回首页</a>
                    </div>
                `
            }
        })
        setTimeout(() => {
            loader.hide();
        }, 500);
    }

    //获取商品列表
    function linkDetail() {
        var item = document.querySelectorAll('.list');
        for (var i = 0; i < item.length; i++) {
            (function (i) {
                item[i].onclick = function () {
                    var id = item[i].getAttribute('data-id')
                    console.log('商品id', id);
                    location.href = `./detail.html?goodId=${id}`
                }
            })(i)
        }
    }

    // 返回顶部
    reTop();
    // 固定导航栏
    fixedD();
    //验证登录
    checkLogin();
</script>

</html>